<template>
   <div>
     <div class="zjhead">
       <div class="mainMoney">
         <label class="imgHead fl"><img :src="minfo.img"/></label>
         <label class="comtitle fl" v-if="yyzzInfos.yyzzName">{{yyzzInfos.yyzzName}}</label>
       </div>
       <div class="totalMoney">
         <div class="totalItem">预计收益：{{tjinfo.notReceived}}元</div>
         <div class="totalItem">累计收益：{{tjinfo.received}}元</div>
       </div>
     </div>
     <div class="sydetail" v-for="o,index in recentOrder" v-if="recentOrder.length>0">
       <div class="sytitle">
            订单号:{{o.orderNo}}
            <label class="fr" style="font-weight: normal;">
              <el-tag type="primary" plain  size="mini" v-if="o.orderStatus == '01'">已取消</el-tag>
              <el-tag type="primary" plain size="mini" v-if="o.orderStatus == '02'">进行中</el-tag>
              <el-tag type="primary" plain size="mini" v-if="o.orderStatus == '03'">已完成</el-tag>
            </label>
            <div class="cl"></div>

       </div>
       <ul>
         <li v-if="o.leaseStartDateStr">
           <label class="ltitle fl">租金周期</label>
           <label class="lright fr">{{o.leaseStartDateStr}}至{{o.leaseEndDateStr}}</label>
           <div class="cl"></div>
         </li>
         <li>
           <label class="ltitle fl">租金金额</label>
           <label class="lright fr" style="color: red;" v-if="o.cycle == 'Q'">{{o.monthAmount*3}}元</label>
           <label class="lright fr" style="color: red;" v-if="o.cycle == 'M'">{{o.monthAmount*1}}元</label>
           <label class="lright fr" style="color: red;" v-if="o.cycle == 'Y'">{{o.monthAmount*12}}元</label>

           <div class="cl"></div>
         </li>
         <li v-if="o.leaseFeePayTimeStr">
           <label class="ltitle fl">发放时间</label>
           <label class="lright fr">{{o.leaseFeePayTimeStr}}</label>
           <div class="cl"></div>
         </li>
         <li v-if="o.invoiceStatus">
           <label class="ltitle fl">开票状态</label>
           <label class="lright fr" v-if="o.invoiceStatus == '01'">未开具</label>
           <label class="lright fr" v-if="o.invoiceStatus == '02'">已申请</label>
           <label class="lright fr" v-if="o.invoiceStatus == '03'">已开具</label>
           <label class="lright fr" v-if="o.invoiceStatus == '04'">开具失败</label>
           <div class="cl"></div>
         </li>

       </ul>
     </div>
     <div v-if="recentOrder.length<1" style="text-align: center; padding-top: 30px; font-size: 14px;">
       暂无数据
     </div>

   </div>
</template>

<script>
  export default {
    name: "zujin-detail",
    data(){
      return{
        minfo:{},
        tjinfo:{},
        recentOrder:[],
        yyzzInfos:{
          yyzzName: ''
        }
      }
    },
    created(){
      this.getmineInfo();
      this.getyyzz();
      this.getorderInfos();
      this.getorderInfo();
    },
    methods:{
      getorderInfos(){
        this.$http.post('yxc/order/queryList',{
          "payStatus":"02",
          "carWxUserId":localStorage.getItem('wxUserId'),

        }).then(res=>{
          if(res.code ==200){
          this.recentOrder = res.data
        }
      })
      },
      getorderInfo(){
        this.$http.get('yxc/orderExpendPay/getTotalRevenue',{params:{carWxUserId:localStorage.getItem('wxUserId')}}).then(res=>{
            if(res.code == 200){
              this.tjinfo = res.data
        }
        })
      },
      getyyzz(){
        this.$http.get('yxc/merchant/viewMerByWxUserId').then(res=>{
          if(res.code == 200){
          this.yyzzInfos = res.data

        }
      })
      },
      getmineInfo(){
        this.$http.get('yxc/wxuser/get').then(res=>{
          if(res.code == 200){
          this.minfo = res.data
        }else{
          this.$toast(res.message);
        }
      })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .mainMoney{
    position: relative;top:20px; left:15px;
    .imgHead{
      display:block;
      background:red;
      overflow: hidden;
      border-radius: 1000px;
      width:40px;height:40px;
      img{width:100%;height: 100%;}
    }
    .comtitle{
      display: block;
      font-size:16px;
      color:#FFF;
      position: relative;
      top:10px;left:5px;

    }

  }
  .totalMoney{
    display: flex;
    color:#FFF;
    .totalItem{
      width:100%;
      text-align: center;
      font-size:14px;
    }

    position: absolute;
    bottom:30px;left:10px;right:10px;
  }
  .zjhead{
    height: 151px;
    margin:10px;
    position: relative;

    background-size: cover;
    box-shadow: 0 0 60px rgba(0,0,0,.1);
    border-radius: 10px;
    background: url("./img/shouyiBg.png") no-repeat center;
    background-size: cover;
  }
  .sydetail{
    background: #FFF;

    border-radius: 5px;

    margin:10px;

    .sytitle{
      border-bottom: 1px solid #EEE;
      line-height: 45px;
      font-size:15px;
      padding:0 10px;
      font-weight: 500;
    }
    ul{
      padding:5px;
      li{border-bottom: 1px solid #EEE;
        font-size:14px;
        padding:10px 0;
      .ltitle{
        color:rgba(153,153,153,1);
      }
        .lright{

        }
      }
      li:last-child{
        border:none;
      }
    }
  }

</style>
